<script setup>
import { ref,onMounted,watch } from 'vue'
import{ selectClazzApi,selectEmpApi,addClazzApi,getByIdApi,updateApi,deleteByIdApi} from '@/api/clazz.js'
import {Delete,Edit} from '@element-plus/icons-vue'
import { ElMessage ,ElMessageBox} from 'element-plus';


//下拉列表数据
let subjects=ref([{name:'Java',value:1},{name:'前端',value:2},{name:'大数据',value:3},{name:'Python',value:4},{name:'GO/嵌入式',value:5}])

const selectclazz=ref({
  name:'',
  date:[],
  begin:'',
  end:''
})
//watch侦听
watch(()=>selectclazz.value.date,(newval,iloval)=>{
  if(selectclazz.value.date &&selectclazz.value.date.length>0){
    selectclazz.value.begin=selectclazz.value.date[0];
    selectclazz.value.end=selectclazz.value.date[1];
  }
})
let clazzList=ref([])
let empList=ref([])
//查询班级
let selectcla=async()=>{
  let result=await selectClazzApi(selectclazz.value.name,
  selectclazz.value.begin,
  selectclazz.value.end,
  page.value,
  pageSize.value); 

  if (result.code) {
    clazzList.value=result.data.rows;
    total.value=result.data.total;
  }
  
}


let selectemp=async()=>{
  let result=await selectEmpApi();
  console.log(result);
  if (result.code) {
    empList.value=result.data
    
    //
  }
}

//清空方法
let clear=()=>{
  selectclazz.value={name:'',date:[],begin:'',end:''}
  selectcla();
}
// 分页
let page=ref(1)
let pageSize=ref(10)
let total=ref(0)
//分页一点就查询
const handleSizeChange = (val) => {
  select();
}
const handleCurrentChange = (val) => {
  select();
}

//钩子函数加载就执行
onMounted(() => {
  selectcla();
  selectemp();
})
//班级对象
let clazzObject=ref({
  id:'',
  name:'',
  room:'',
  beginDate:'',
  endDate:'',
  masterId:'',
  createTime:'',
  updateTime:'',
  status:'',
  subject:''
})
// 控制弹窗
const dialogVisible = ref(false)
const dialogTitle = ref('')

//新增
let addclazz=()=>{
  dialogVisible.value=true;
  dialogTitle.value='新增班级';
  selectemp();
  clazzObject.value={
  id:'',
  name:'',
  room:'',
  beginDate:'',
  endDate:'',
  masterId:'',
  createTime:'',
  updateTime:'',
  status:'',
  subject:''
}
}
let addcla=async()=>{
  //保存之前, 先校验表单, 校验通过, 再发送请求
  if (!clazzFormRef) return
  await clazzFormRef.value.validate(async(valid, fields) => {
    if (valid) { //通过
      let result;
      if (clazzObject.value.id) {
        result=await updateApi(clazzObject.value)
        dialogVisible.value = false;
      }else{
        result = await addClazzApi(clazzObject.value);
        dialogVisible.value = false;
      }
      
      if(result.code){//成功
        dialogVisible.value = false;
        ElMessage.success('保存成功');
        selectcla();
      }else {
        ElMessage.error(result.msg);
      }

    } else { //不通过
      ElMessage.error('表单校验不通过,请检查表单');
    }
  })
}
//校验表单
let clazzFormRef=ref()
let rules=ref({
  name: [
    { required: true, message: '请输入班级名', trigger: 'blur'},
    { min: 4, max: 30, message: '班级名称长度在4到30之间', trigger: 'blur'},
  ],room: [
    { required: true, message: '请输入班级教室名', trigger: 'blur'},
    { min: 1, max: 20, message: '教室名称长度在1到20之间', trigger: 'blur'},],

    beginDate: [{required: true,message: '时间不为空',trigger: 'change'},],
    endDate: [{required: true,message: '时间不为空',trigger: 'change'},],

    subject: [{required: true,message: '请选择学科',trigger: 'change'},]
});

//查询回显
let updateclazz=async(id)=>{
  dialogVisible.value=true;
  let result=await getByIdApi(id);
  console.log(result);
  clazzObject.value=result.data

  dialogTitle.value='修改员工'
  if (clazzFormRef.value) {
    clazzFormRef.value.resetFields();
  }
}
//单个删除员工
const deleteclazz=(id)=>{
  //console.log(id);
  ElMessageBox.confirm('您确定要删除部门吗?','警告',
    {confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',}
  ).then(async() => {//确认
      const result = await deleteByIdApi(id);
      if(result.code){
        ElMessage.success('删除成功');
        selectcla();
      }else{
        ElMessage.error(result.message);
      }
    }).catch((err) => {//失败回调
      console.log(err)
      ElMessage.info("操作取消")
      })
}
</script>

<template>
  <h1>班级管理</h1>
  <div id="cd">
  <el-form :inline="true" :model="selectclazz" class="demo-form-inline" >
    <el-form-item label="班级名称">       
      <el-input v-model="selectclazz.name" placeholder="请输入班级名称" />
    </el-form-item>
    
    <el-form-item label="请选择日期">
      <el-date-picker
      v-model="selectclazz.date"
       value-format="YYYY-MM-DD"
        type="daterange"
        range-separator="到"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
       
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="selectcla">查询</el-button>
      <el-button type="danger" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>
</div>
<!-- 新增班级 按钮-->
 <div id="dd">
<el-button type="primary" @click="addclazz"><el-icon><Plus /></el-icon>新增班级</el-button>
<el-table
    ref="multipleTableRef"
    :data="clazzList"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column   width="55" /><!--:selectable="selectable"这个是带选择的表格  <template #default="scope">-->
    <el-table-column type="index" label="序号" width="120" />
    <el-table-column property="name" label="班级名称" width="120" />
    <el-table-column property="room" label="班级教室" width="120" />
    <el-table-column property="masterName" label="班主任" width="120" />
    <el-table-column property="beginDate" label="开课时间" width="120" />
    <el-table-column property="endDate" label="结课时间" width="120" />
    <el-table-column property="status" label="状态" width="120" />
    <!-- <el-table-column property="masterId" label="老师Id" width="120" /> -->
    <!-- <el-table-column property="createTime" label="姓名" width="120" /> -->
    <el-table-column property="updateTime" label="最后操作时间" />
    <el-table-column  label="操作">
      <template #default="scope">
      <el-button type="warning" @click="updateclazz(scope.row.id)" :icon="Edit"  circle/>
      <el-button type="danger" @click="deleteclazz(scope.row.id)" :icon="Delete"  circle/>
    </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="demo-pagination-block">
    <div class="demonstration">
    <el-pagination
      v-model:current-page=page
      v-model:page-size=pageSize
      :background="background"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
  </div>
</div>


<!-- 表单 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" >
      <el-form :model="clazzObject" label-width="80px" :rules="rules" ref="clazzFormRef">
        <!-- 基本信息 -->
            <el-form-item label="班级名称" prop="name" >
              <el-input v-model="clazzObject.name" placeholder="请输入班级名称,如:北京黑马JavaEE就业100期"></el-input>
            </el-form-item>
            <el-form-item label="班级教室" prop="room">
              <el-input v-model="clazzObject.room" placeholder="请填写班级教室"></el-input>
            </el-form-item>
            <el-form-item label="开课时间" prop="beginDate">
              <el-date-picker v-model="clazzObject.beginDate" type="date" style="width: 100%;" placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
            </el-form-item>
            <el-form-item label="结课时间" prop="endDate">
              <el-date-picker v-model="clazzObject.endDate" type="date" style="width: 100%;" placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
            </el-form-item>
            <el-form-item label="班主任" prop="masterId">
              <el-select v-model="clazzObject.masterId" placeholder="请选择" style="width: 100%;">
                <el-option v-for="emp in empList" :label="emp.name" :value="emp.id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="学科" prop="subject">
              <el-select v-model="clazzObject.subject" placeholder="请选择" style="width: 100%;">
                <el-option v-for="subject in subjects" :label="subject.name" :value="subject.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addcla">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
      </el-form>
    </el-dialog>
</template>

<style scoped>
#dd{
  margin-bottom: 20px;
}
#cd{
  margin: 20px 0px;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>